<template>
  <div id="pics">
    <img v-for="(imgUrl, i) in imgList"
         :key="imgUrl.id" :ref="i"
         :class="currentIndex === i ? 'topPic' : 'hiddenPic'" :data-index="i"
         :src="isVisitedList[i]? imgUrl : ''"
         :width="imgSizes[i]" alt="图片不见了哦"
         @load="finishLoading(i)" @mouseenter="StartWatching"
         @mouseleave="StopWatching" @mousemove="ViewFollow" @contextmenu.prevent>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions} from "vuex";
import {Loading} from 'element-ui';
export default {
  name: "ThumbNail",
  data() {
    return {
      loading: null,
    }
  },
  computed: {
    ...mapState(['currentIndex', "imgList", "imgSizes", "imageNum"]),
    isLoadingList(){
      return new Array(this.imageNum).fill(true)
    },
    isVisitedList() {
      const arr = new Array(this.imageNum).fill(false);
      arr[0] = true;
      return arr
    }
  },
  methods: {
    ...mapMutations(["StartWatching", "ViewFollow", "StopWatching"]),
    ...mapActions(['loadImages']),
    finishLoading(i) {
      this.isLoadingList[i] = false;
      // 如果加载好的图片是当前展示图片，则立即关闭加载动画，防止未轮播时已加载好但仍显示加载中的bug
      if (this.currentIndex === i && this.loading) this.loading.close();
    }
  },
  watch: {
     currentIndex(cur) {
       if (this.loading && !this.isLoadingList[cur]) {
         this.loading.close();
         this.loading = null;
       } else if (!this.loading && this.isLoadingList[cur]) {
         this.loading = Loading.service({target: '#pics', spinner: 'el-icon-loading',
           text: '图片拼命加载中', background: 'rgba(0,0,0,0.7)'
         });
       }

       this.isVisitedList[cur] = true;
     }
  },
  mounted() {
    this.loading = Loading.service({target: '#pics', spinner: 'el-icon-loading',
      text: '图片拼命加载中', background: 'rgba(0,0,0,0.7)'
    });
  }

  // methods: {
  //   loadImg(cur) {
  //      // import(`../assets/jk${cur}.png`).then(res => this.imgList[cur] = res.default)
  //     this.imgList[cur] = imgLoader(imgLoader.keys()[cur]);
  //   }
  // },
}
</script>

<style scoped>
  #pics {
    margin: 75px 50px;
    height: 400px;
    width: 200px;
  }
  img{
    margin-top: 20px;
    position: absolute;
    transition: all 0.65s ease;
  }
  .topPic {
    opacity: 1;
    z-index: 1;
    cursor: zoom-in;
  }
  .hiddenPic {
    opacity: 0;
    z-index: 0;
    cursor: default;
  }
</style>